<template>
  <div class="madp-customer-invitation">
    <div class="total">共{{ page.total }}位客户</div>
    <div class="com-invite-list">
      <mescroll-view :showMoreBtn="page.current * page.size < page.total" @getMoreData="getMoreData">
        <el-empty v-if="list.length < 1" :image="require('@/assets/img/no-todo.png')" description="暂无邀请数据"></el-empty>
        <template v-else>
          <div v-for="(item, idx) in list" :key="idx" class="invitation-list-item">
            <div class="invitation-list-item-left">
              <img :src="item.avatar || $defaultAvatar" alt />
              <div>
                <p>{{ item.name }}</p>
                <span>来源: {{ item.typeDesc }}</span>
              </div>
            </div>
            <div class="invitation-list-item-right">{{ item.joinTime }}</div>
          </div>
        </template>
      </mescroll-view>
    </div>
    <back-btn />
  </div>
</template>
<script>
import MescrollView from '@/components/material/mescroll-view.vue'
import * as qrcodeApi from '@/api/qrcode-of-customer'
import backBtn from '@/components/back-btn.vue'
export default {
  name: 'customerInviteList',
  components: { MescrollView, backBtn },
  data() {
    return {
      wxUserId: '',
      wxExternalUserid: '',
      page: {
        current: 1,
        size: 10,
        total: 0
      },
      list: []
    }
  },
  props: {},
  created() {
    this.wxUserId = this.$route.query.wxUserId
    this.wxExternalUserid = this.$route.query.wxExternalUserid
  },
  activated() {
    this.getInviteList()
  },
  methods: {
    getMoreData() {
      this.page.current++
      this.getInviteList
    },
    getInviteList() {
      let params = {
        current: this.page.current,
        size: this.page.size,
        wxUserId: this.wxUserId, //当前用户userid(成员userid)
        wxExternalUserid: this.wxExternalUserid //客户userid
      }
      qrcodeApi.inviteCustomerData(params).then((res) => {
        let { total, records } = res.data.data
        this.page.total = total
        if (this.page.current == 1) {
          this.list = records
        } else {
          this.list.push(...records)
        }
      })
    }
  }
}
</script>
<style scoped lang='scss'>
.madp-customer-invitation {
  background: #fafafa;
  box-sizing: border-box;
  width: 100%;
  height: 100vh;
  .total {
    font-size: 15px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(44, 44, 44, 0.8);
    padding: 12px 24px;
    background: #fff;
    box-shadow: 0px 1px 0px 0px rgba(44, 44, 44, 0.1);
  }
  .com-invite-list {
    padding: 16px;
    height: calc(100vh - 46px);
  }
  .invitation-list-item {
    width: 100%;
    height: 92px;
    padding: 16px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    background: #ffffff;
    box-shadow: 0px 3px 6px 0px rgba(181, 181, 181, 0.16);
    border-radius: 8px;
    margin-bottom: 10px;
    &-left {
      display: flex;
      img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        margin-right: 11px;
      }
      div {
        p {
          font-size: 17px;
          font-weight: 400;
          color: #2c2c2c;
          line-height: 38px;
        }
        span {
          font-size: 14px;
          font-weight: 400;
          color: rgba(44, 44, 44, 0.5);
        }
      }
    }
    &-right {
      font-size: 13px;
      font-weight: 500;
      color: rgba(44, 44, 44, 0.4);
      line-height: 18px;
    }
  }
}
</style>
